---
title: Colors - Flowbite React
description: Learn how to customize and override the default color system in Flowbite React, including base colors, semantic colors, and theme configuration for both Tailwind CSS v3 and v4
---

Flowbite React comes with a comprehensive color system that includes both base colors and semantic colors, along with additional theme configurations. This guide will show you how to use and customize these settings in your project.

## Default Theme Settings

### Background Images

These background images are used for various UI components:

```js
const backgroundImage = {
  "arrow-down-icon":
    "url('data:image/svg+xml,%3Csvg%20aria-hidden%3D%22true%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2010%206%22%3E%3Cpath%20stroke%3D%22%236B7280%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m1%201%204%204%204-4%22%2F%3E%3C%2Fsvg%3E')",
  "check-icon":
    "url('data:image/svg+xml,%3Csvg%20aria-hidden%3D%27true%27%20xmlns%3D%27http://www.w3.org/2000/svg%27%20fill%3D%27none%27%20viewBox%3D%270%200%2016%2012%27%3E%3Cpath%20stroke%3D%27white%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20stroke-width%3D%273%27%20d%3D%27M1%205.917%205.724%2010.5%2015%201.5%27/%3E%3C/svg%3E')",
  "dash-icon":
    "url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20fill%3D%22none%22%20viewBox%3D%220%200%2016%2012%22%3E%3Cpath%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%223%22%20d%3D%22M0.5%206h14%22%2F%3E%3C%2Fsvg%3E')",
  "dot-icon":
    "url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22white%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E')",
};
```

### Box Shadows

Additional box shadow utilities:

```js
const boxShadow = {
  "sm-light": "0 2px 5px 0px rgba(255, 255, 255, 0.08)",
};
```

### Base Colors

The complete set of base colors with their full spectrum:

```js
const baseColors = {
  gray: {
    50: "#F9FAFB",
    100: "#F3F4F6",
    200: "#E5E7EB",
    300: "#D1D5DB",
    400: "#9CA3AF",
    500: "#6B7280",
    600: "#4B5563",
    700: "#374151",
    800: "#1F2937",
    900: "#111827",
  },
  red: {
    50: "#FDF2F2",
    100: "#FDE8E8",
    200: "#FBD5D5",
    300: "#F8B4B4",
    400: "#F98080",
    500: "#F05252",
    600: "#E02424",
    700: "#C81E1E",
    800: "#9B1C1C",
    900: "#771D1D",
  },
  orange: {
    50: "#FFF8F1",
    100: "#FEECDC",
    200: "#FCD9BD",
    300: "#FDBA8C",
    400: "#FF8A4C",
    500: "#FF5A1F",
    600: "#D03801",
    700: "#B43403",
    800: "#8A2C0D",
    900: "#771D1D",
  },
  yellow: {
    50: "#FDFDEA",
    100: "#FDF6B2",
    200: "#FCE96A",
    300: "#FACA15",
    400: "#E3A008",
    500: "#C27803",
    600: "#9F580A",
    700: "#8E4B10",
    800: "#723B13",
    900: "#633112",
  },
  green: {
    50: "#F3FAF7",
    100: "#DEF7EC",
    200: "#BCF0DA",
    300: "#84E1BC",
    400: "#31C48D",
    500: "#0E9F6E",
    600: "#057A55",
    700: "#046C4E",
    800: "#03543F",
    900: "#014737",
  },
  teal: {
    50: "#EDFAFA",
    100: "#D5F5F6",
    200: "#AFECEF",
    300: "#7EDCE2",
    400: "#16BDCA",
    500: "#0694A2",
    600: "#047481",
    700: "#036672",
    800: "#05505C",
    900: "#014451",
  },
  blue: {
    50: "#EBF5FF",
    100: "#E1EFFE",
    200: "#C3DDFD",
    300: "#A4CAFE",
    400: "#76A9FA",
    500: "#3F83F8",
    600: "#1C64F2",
    700: "#1A56DB",
    800: "#1E429F",
    900: "#233876",
  },
  indigo: {
    50: "#F0F5FF",
    100: "#E5EDFF",
    200: "#CDDBFE",
    300: "#B4C6FC",
    400: "#8DA2FB",
    500: "#6875F5",
    600: "#5850EC",
    700: "#5145CD",
    800: "#42389D",
    900: "#362F78",
  },
  purple: {
    50: "#F6F5FF",
    100: "#EDEBFE",
    200: "#DCD7FE",
    300: "#CABFFD",
    400: "#AC94FA",
    500: "#9061F9",
    600: "#7E3AF2",
    700: "#6C2BD9",
    800: "#5521B5",
    900: "#4A1D96",
  },
  pink: {
    50: "#FDF2F8",
    100: "#FCE8F3",
    200: "#FAD1E8",
    300: "#F8B4D9",
    400: "#F17EB8",
    500: "#E74694",
    600: "#D61F69",
    700: "#BF125D",
    800: "#99154B",
    900: "#751A3D",
  },
};
```

### Semantic Colors

The default semantic colors used throughout Flowbite React components:

```js
const semanticColors = {
  primary: {
    50: "#EBF5FF",
    100: "#E1EFFE",
    200: "#C3DDFD",
    300: "#A4CAFE",
    400: "#76A9FA",
    500: "#3F83F8",
    600: "#1C64F2",
    700: "#1A56DB",
    800: "#1E429F",
    900: "#233876",
  },
};
```

## Customizing Colors

### Tailwind CSS v3

For Tailwind CSS v3, you can customize colors by extending the theme in your `tailwind.config.js`:

```js
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
        // Override primary colors
        primary: {
          50: "#f0f9ff",
          100: "#e0f2fe",
          200: "#bae6fd",
          300: "#7dd3fc",
          400: "#38bdf8",
          500: "#0ea5e9",
          600: "#0284c7",
          700: "#0369a1",
          800: "#075985",
          900: "#0c4a6e",
        },
      },
    },
  },
};
```

### Tailwind CSS v4

Tailwind CSS v4 introduces a new color system based on CSS variables. To customize colors define your color variables in the base layer:

```css
@import "tailwindcss";

@theme {
  --color-primary-50: #f0f9ff;
  --color-primary-100: #e0f2fe;
  --color-primary-200: #bae6fd;
  --color-primary-300: #7dd3fc;
  --color-primary-400: #38bdf8;
  --color-primary-500: #0ea5e9;
  --color-primary-600: #0284c7;
  --color-primary-700: #0369a1;
  --color-primary-800: #075985;
  --color-primary-900: #0c4a6e;
}
```
